<div class="row">
<div class="col-lg-6">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>Area Chart Example <small>With custom colors.</small></h5>
            <div class="ibox-tools">
                <a class="collapse-link">
                    <i class="fa fa-chevron-up"></i>
                </a>
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    <i class="fa fa-wrench"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                    <li><a href="#">Config option 1</a>
                    </li>
                    <li><a href="#">Config option 2</a>
                    </li>
                </ul>
                <a class="close-link">
                    <i class="fa fa-times"></i>
                </a>
            </div>
        </div>
        <div class="ibox-content" style="position: relative">
            <div id="morris-area-chart"></div>
        </div>
    </div>
</div>
</div>

<script>
$(function() {
Morris.Area({
element: 'morris-area-chart',
data: [{ period: '2010 Q1', iphone: 2666, ipad: null, itouch: 2647 },
{ period: '2010 Q2', iphone: 2778, ipad: 2294, itouch: 2441 },
{ period: '2010 Q3', iphone: 4912, ipad: 1969, itouch: 2501 },
{ period: '2010 Q4', iphone: 3767, ipad: 3597, itouch: 5689 },
{ period: '2011 Q1', iphone: 6810, ipad: 1914, itouch: 2293 },
{ period: '2011 Q2', iphone: 5670, ipad: 4293, itouch: 1881 },
{ period: '2011 Q3', iphone: 4820, ipad: 3795, itouch: 1588 },
{ period: '2011 Q4', iphone: 15073, ipad: 5967, itouch: 5175 },
{ period: '2012 Q1', iphone: 10687, ipad: 4460, itouch: 2028 },
{ period: '2012 Q2', iphone: 8432, ipad: 5713, itouch: 1791 } ],
xkey: 'period',
ykeys: ['iphone', 'ipad', 'itouch'],
labels: ['iPhone', 'iPad', 'iPod Touch'],
pointSize: 2,
hideHover: 'auto',
resize: true,
lineColors: ['#87d6c6', '#54cdb4','#1ab394'],
lineWidth:2,
pointSize:1,
});
});
</script>